<template>
  <div class=''>
    <el-dialog :model-value="props.updateRecevierInfoVisable" :show-close="true" title="修改收货人信息" width="40%"
      :before-close="handleClose">
      <!-- :rules="rules" -->
      <el-form ref="ruleFormRef" :model="recevierInfoForm" status-icon label-width="120px" class="demo-ruleForm">
        <el-form-item label="收货人姓名：" prop="receiverName">
          <el-input v-model="recevierInfoForm.receiverName" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号码：" prop="receiverPhone">
          <el-input v-model="recevierInfoForm.receiverPhone" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮政编号：" prop="receiverPostCode">
          <el-input v-model="recevierInfoForm.receiverPostCode" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="所在区域：" prop="receiverDetailAddress">
          <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
          </el-cascader>

        </el-form-item>
        <el-form-item label="所在区域：" prop="receiverDetailAddress">
          <el-input v-model="recevierInfoForm.receiverDetailAddress" type="text" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import * as orderDetail from "@/request/oms_orderDetail"
import * as areaData from 'element-china-area-data'
import { ElMessage } from 'element-plus';
const props = defineProps(["updateRecevierInfoVisable", "RecevierInfo"])
const emits = defineEmits()
const handleClose = () => {
  emits("closeUpdateRecevierInfo")
}
const recevierInfoForm = ref({
  receiverName: "",
  receiverPhone: "",
  receiverPostCode: "",
  receiverDetailAddress: "",
})
watch(() => props.RecevierInfo.status, () => {
  recevierInfoForm.value.receiverName = props.RecevierInfo.receiverName;
  recevierInfoForm.value.receiverPhone = props.RecevierInfo.receiverPhone;
  recevierInfoForm.value.receiverPostCode = props.RecevierInfo.receiverPostCode;
  recevierInfoForm.value.receiverDetailAddress = props.RecevierInfo.receiverDetailAddress;

})
const options = ref()
options.value = areaData.regionData
const selectedOptions = ref()

const handleChange = (value: any) => {
  getCodeToText(value)
}
watch(() => props.RecevierInfo.receiverProvince, () => {
  getTextToCode()
})
// 根据地名找地区码
const getTextToCode = () => {
  // 市级号码
  const s = []
  const result = options.value.find((item: any) => {
    return item.label === props.RecevierInfo.receiverProvince
  })
  s.push(result.value)
  const result2 = result.children.find((item: any) => {
    return item.label === props.RecevierInfo.receiverCity
  })
  s.push(result2.value)
  const result3 = result2.children.find((item: any) => {
    return item.label === props.RecevierInfo.receiverRegion
  })
  s.push(result3.value)
  selectedOptions.value = s
}
// 根据地区码找地名
const text = ref({
  receiverProvince: "",
  receiverCity: "",
  recevierRegion: ""
})
const getCodeToText = (code: any) => {
  const result = options.value.find((item: any) => {
    return item.value === code[0]
  })
  text.value.receiverProvince = result.label;
  const result2 = result.children.find((item: any) => {
    return item.value === code[1]
  })
  text.value.receiverCity = result2.label;
  const result3 = result2.children.find((item: any) => {
    return item.value === code[2]
  })
  text.value.recevierRegion = result3.label;
}
const submit = () => {
  const receiverInfoParam = {
    orderId: props.RecevierInfo.orderId,
    receiverCity: text.value.receiverCity,
    receiverDetailAddress: props.RecevierInfo.receiverDetailAddress,
    receiverName: props.RecevierInfo.receiverName,
    receiverPhone: props.RecevierInfo.receiverPhone,
    receiverPostCode: props.RecevierInfo.receiverPostCode,
    receiverProvince: text.value.receiverProvince,
    receiverRegion: text.value.recevierRegion,
    status: props.RecevierInfo.status
  }
  orderDetail.updateReceiverInfo(receiverInfoParam).then(res => {
    if (res.code === 200) {
      ElMessage.success("修改成功")
    } else {
      ElMessage.error("修改失败")
    }

  }).finally(() => {
    emits("closeUpdateRecevierInfo")
    emits("getOrderDetail")
  })
}
</script>

<style lang="less" scoped></style>